<template>
	<view class="container">
		<button type="primary" @click="initPoker">自动发牌</button>
		<uni-transition ref="poker" custom-class="card" :style="(pokerData.length-index-1)>0?`margin-left: -`+2*((pokerData.length-index-1))+`px;`:''" mode-class="fade"
			v-for="(item,index) in pokerData" :key="index" :show="show">
			<view v-if="isfanPai==false">
				<!-- <image mode="aspectFill" src="../../static/image/zm.png"></image> -->
				{{item}} 反面
			</view>
			<view v-else>
				<image mode="aspectFit" src="../../static/image/zm.png"></image>
				{{item}} 正面
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		name: "xjt_poker",
		data() {
			return {
				show: true,
				pokerData: ['卡牌 1', '卡牌 2', '卡牌 3', '卡牌 4', '卡牌 5', '卡牌 6', '卡牌 7', '卡牌 8', '卡牌 9', '卡牌 10', '卡牌 11',
					'卡牌 12',
					'卡牌 13'
				],
				//卡牌相关参数
				pokerList: [], //所有卡牌盒子集
				currentIndex: 0, //当前卡牌索引
				intervalId: null, //存储当前定时器参数
				isfanPai: false, //控制正反面，默认显示反面
				//音效先关参数
				music: null, //初始化一个音效播放器


			};
		},
		mounted() {
			//初始化盒子
			this.__initPokerList();
			//初始化音效
			this.__initMusic('/static/poker.wav');

		},
		methods: {
			//初始化所有中奖卡牌盒子
			__initPokerList() {
				this.pokerList = this.$refs['poker'];
			},
			//初始化音效的参数
			__initMusic(soundPath) {
				this.music = uni.createInnerAudioContext();
				this.music.src = soundPath;
				this.music.onPlay(() => {
					console.log('音效播放开始');
				});
				this.music.onError((err) => {
					console.error('音效播放出错:', err);
				});
			},
			//清除定时器
			clear() {
				clearInterval(this.intervalId);
				console.log('发牌完毕!');
			},
			//设置卡牌开场动画
			__setPokerInitAnimation(item) {
				//设置起始位置
				item.step({
					// translateX: '400px',
					translateY: '900px',
				});
				item.run();
			},
			
			//自动发牌效果,每隔一秒发牌
			initPoker() {
				this.intervalId = setInterval(() => {
					this.currentIndex = (this.currentIndex + 1) % this.pokerData.length;
					if (this.currentIndex == 0) {
						this.__setPokerInitAnimation(this.pokerList[0])
						this.clear();
						//开始下一段动画
						this.__pokerMiss();
					} else {
						this.__setPokerInitAnimation(this.pokerList[this.pokerData.length - this.currentIndex])
					}
				}, 200);
				
				
				
			},
			//卡牌消失在对话框
			__pokerMiss(){
				let ivd = setInterval(() => {
					this.music.play();
					this.currentIndex = (this.currentIndex + 1) % this.pokerData.length;
					if (this.currentIndex == 0) {
						this.start(0);
						clearInterval(ivd);
					} else {
						this.start(this.pokerData.length - this.currentIndex);
					}
				}, 1000);
				
			},
			//动画效果具体方法 翻牌
			go_filp(index) {
				this.$refs['poker'][index].step({
					translateX:'5px',
					rotateY: 180,
					scale: [1.2,1.2],
				}, {
					duration: 800,
					timingFunction: 'ease',
					delay: 0,
					transformOrigin: 'up center'
				})
				//this.$refs['poker'][index].run();
				this.isfanPai = true;
				return this.$refs['poker'][index];
			},
			//向上
			go_up(index) {
				let obj = this.$refs['poker'][index];
				obj.step({
					translate:[-800,-800],
					translateY: '-800px'
				}, {
					duration: 800,
					timingFunction: 'ease-in',
					delay: 0,
					transformOrigin: 'up center'
				})
				return obj;
			},
			//开始自定义动画
			start(index) {
				console.log(index + '=>准备发牌动画')
				//第一个
				let refobj = this.pokerList[index];
				//翻牌
				refobj = this.go_filp(index);
				refobj = this.go_up(index);
				refobj.run(()=>{
					this.music.stop();
					console.log('动画结束，关闭音乐');					
				});
			}
		}
	}
</script>

<style>
	@import 'css/index.css'
</style>